<template>
  <div class="transaction-item">
    <div 
      class="tx-icon"
      :style="{ backgroundColor: iconColor + '20' }"
    >
      <van-icon :name="typeIcon" :color="iconColor" />
    </div>
    <div class="tx-details">
      <div class="tx-info">
        <span class="tx-type">{{ typeText }}</span>
        <van-tag size="mini" plain>{{ transaction.currency }}</van-tag>
      </div>
      <span class="tx-date">{{ transaction.date }}</span>
    </div>
    <span 
      :class="['tx-amount', isPositive ? 'amount-positive' : 'amount-negative']"
    >{{ transaction.amount }} {{ transaction.currency }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  transaction: {
    type: Object,
    required: true
  }
})

const isPositive = computed(() => props.transaction.amount.startsWith('+'))

const typeIcon = computed(() => {
  return {
    'deposit': 'peer-pay',
    'withdraw': 'cash-back-record',
    'purchase': 'cart-o'
  }[props.transaction.type] || 'balance-o'
})

const typeText = computed(() => {
  return {
    'deposit': '充值',
    'withdraw': '提现',
    'purchase': '购买'
  }[props.transaction.type] || '交易'
})

const iconColor = computed(() => {
  return {
    'deposit': 'var(--success-color)',
    'withdraw': 'var(--warning-color)',
    'purchase': 'var(--primary-color)'
  }[props.transaction.type] || 'var(--primary-color)'
})
</script>

<style scoped>
.transaction-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: var(--border-radius);
  background-color: var(--background-color-light);
  margin-bottom: 8px;
}

.tx-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.tx-details {
  flex: 1;
}

.tx-info {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.tx-type {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  margin-right: 8px;
}

.tx-date {
  font-size: 12px;
  color: var(--text-color-lighter);
}

.tx-amount {
  font-size: 14px;
  font-weight: 500;
}

.amount-positive {
  color: var(--success-color);
}

.amount-negative {
  color: var(--text-color);
}
</style>